import React, {
    useContext, useEffect, useState 
} from 'react';
import NavMenuNodeType from '@/platform/types/nav-menu-node-type';
import PropTypes from 'prop-types';
import DynamicIcon from '@/platform/components/dynamic-icon/DynamicIcon';
import lodash from 'lodash';
import { useHistory } from 'react-router';
import NavMenuContext from '@/platform/contexts/nav-menu-context';
import classes from './NavMenuNode.module.less';

const NavMenuNode:React.FC<NavMenuNodeType> = (props) => {
    const history = useHistory();
    const dispatchNavMenuState = useContext(NavMenuContext);
    const [data, setData] = useState<any>({});

    useEffect(() => {
        setData(props.nodeData);
    }, [props.nodeData])

    const isLeaf = (item: any) => (
        !item[props.nodeConfig.menuChildren as string]
          || !item[props.nodeConfig.menuChildren as string].length
    );

    const itemClicked = (item: any) => () => {
        if (!isLeaf(item)) {
            item[props.nodeConfig.menuState as string] = !item[props.nodeConfig.menuState as string];
            setData(lodash.clone(data));
        } else {
            history.push(item[props.nodeConfig.menuUrl as string]);
            dispatchNavMenuState()
        }
    };


    const getObjProp = (obj: any, prop: string) => obj[props.nodeConfig[prop]];
    return (
        <>
            {
                !isLeaf(data) && getObjProp(data, 'menuState') && (
                    <ul
                        className={classes["app-nav-menu-node-container"]}
                    >
                        {
                            getObjProp(data, 'menuChildren').map((item:any) => (
                                <li key={item.id}>
                                    <div
                                        className={classes["app-nav-menu-node-block"]}
                                        onClick={itemClicked(item)}
                                        style={
                                            { paddingLeft: props.level * 15 + 'px' }
                                        }
                                    >
                                        <div className={classes["app-node"]}>
                                            {
                                                !isLeaf(item) && getObjProp(item, 'menuState') && <DynamicIcon iconName="DownOutlined" />
                                            }
    
                                            {
                                                !isLeaf(item) && !getObjProp(item, 'menuState') && <DynamicIcon iconName="RightOutlined" />
                                            }
                                            
                                        </div>
                                        <div>
                                            <DynamicIcon
                                                iconName={getObjProp(item, 'menuIcon')}
                                                iconProps={{
                                                    className: classes['app-node-icon']
                                                }}
                                            />
                                            <span>{ getObjProp(item, 'menuLabel') }</span>
                                        </div>

                                    </div>
                                    <NavMenuNode nodeData={item} nodeConfig={props.nodeConfig} level={props.level + 1} />
                                </li>
                            ))
                        }
                    </ul>
                )
            }
        </>
    );
};

NavMenuNode.propTypes = {
    nodeData: PropTypes.object,
    nodeConfig: PropTypes.any,
    level: PropTypes.number.isRequired
}

NavMenuNode.defaultProps = {
    nodeData: {},
    nodeConfig: {
        menuId: 'id',
        menuParentId: 'parentId',
        menuLabel: 'text',
        menuIcon: 'icon',
        menuChildren: 'children',
        menuUrl: 'attr1',
        menuAttr: 'attributes',
        menuState: 'open'
    }
}

export default NavMenuNode;

